import {mapGetters} from 'vuex'

export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playList'
    ])
  },
  mounted() {
    this.handlePlaylist(this.playList)
  },
  activated() {
    this.handlePlaylist(this.playList)
  },
  watch: {
    playList(newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
    handlePlaylist() {
      throw new Error('component must implement handlePlaylist method')
    }
  }
}

// export const playerMixin = {
//   computed: {
//     iconMode() {
//       return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
//     },
//     ...mapGetters([
//       'sequenceList',
//       'playlist',
//       'currentSong',
//       'mode',
//       'favoriteList'
//     ])
//   },
//   methods: {
//     changeMode() {
//       const mode = (this.mode + 1) % 3
//       this.setPlayMode(mode)
//       let list = null
//       if (mode === playMode.random) {
//         list = shuffle(this.sequenceList)
//       } else {
//         list = this.sequenceList
//       }
//       this.resetCurrentIndex(list)
//       this.setPlaylist(list)
//     },
//     resetCurrentIndex(list) {
//       let index = list.findIndex((item) => {
//         return item.id === this.currentSong.id
//       })
//       this.setCurrentIndex(index)
//     },
//     toggleFavorite(song) {
//       if (this.isFavorite(song)) {
//         this.deleteFavoriteList(song)
//       } else {
//         this.saveFavoriteList(song)
//       }
//     },
//     getFavoriteIcon(song) {
//       if (this.isFavorite(song)) {
//         return 'icon-favorite'
//       }
//       return 'icon-not-favorite'
//     },
//     isFavorite(song) {
//       const index = this.favoriteList.findIndex((item) => {
//         return item.id === song.id
//       })
//       return index > -1
//     },
//     ...mapMutations({
//       setPlayMode: 'SET_PLAY_MODE',
//       setPlaylist: 'SET_PLAYLIST',
//       setCurrentIndex: 'SET_CURRENT_INDEX',
//       setPlayingState: 'SET_PLAYING_STATE'
//     }),
//     ...mapActions([
//       'saveFavoriteList',
//       'deleteFavoriteList'
//     ])
//   }
// }
//
// export const searchMixin = {
//   data() {
//     return {
//       query: '',
//       refreshDelay: 120
//     }
//   },
//   computed: {
//     ...mapGetters([
//       'searchHistory'
//     ])
//   },
//   methods: {
//     onQueryChange(query) {
//       this.query = query
//     },
//     blurInput() {
//       this.$refs.searchBox.blur()
//     },
//     addQuery(query) {
//       this.$refs.searchBox.setQuery(query)
//     },
//     saveSearch() {
//       this.saveSearchHistory(this.query)
//     },
//     ...mapActions([
//       'saveSearchHistory',
//       'deleteSearchHistory'
//     ])
//   }
// }
